/**
* @Author: zmx
* @Date: 2023/9/26
* @Description:
*/
<template>
  <el-dialog :title="title==='修改'?title+'方案':'方案'+title" :visible.sync="show" append-to-body width="750px" :before-close="handleClose">
    <el-form :inline="true" :model="formInline" label-width="120px" :disabled="title=='详情'" >
      <el-row>
        <el-form-item label="方案名称：">
          <el-input   v-model="formInline.patrolPlanName" placeholder="方案名称"></el-input>
        </el-form-item>
        <el-form-item label="巡检类型：">
          <el-select
            v-model="formInline.patrolPlanType"
            value-key="id"
            filterable
            clearable
            style="width: 200px"
          >
            <el-option
              v-for="item in optionsList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="选择作业项：" label-width="120px">
<!--          <el-cascader-->
<!--            v-model="itemType"-->
<!--            :options="optionsListItem"-->
<!--            style="width: 200px"-->
<!--            ref="caseAdd"-->
<!--            @change="getItemSelect"></el-cascader>-->
          <el-tree
            :data="optionsListItem"
            node-key="value"
            show-checkbox
            :default-expand-all="false"
            ref="tree"
            @check="getItemSelect"
            highlight-current>
          </el-tree>
        </el-form-item>
        <el-form-item label="方案描述：">
          <el-input style="width:200px"   type="textarea" :rows="2" v-model="formInline.patrolPlanDesc" placeholder="内容描述"></el-input>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="任务周期(天):" label-width="120px">
          <el-input-number style="width:100px" controls-position="right" v-model="formInline.patrolCycles" :min="1" :max="999" placeholder="任务周期"></el-input-number>
        </el-form-item>
        <el-form-item label="任务次数:" label-width="120px">
          <el-input-number style="width: 100px" controls-position="right" v-model="formInline.patrolFrequency" :min="1" :max="999" placeholder="任务次数"></el-input-number>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="已选作业项:">
          <div class="selectWork">
            <div v-for="item in selectItemType" class="tab">
              {{ item.label }}
              <span v-if="title!=='详情'" class="closeIcon" @click="getDelete(item)">
                <i class="el-icon-close"></i>
              </span>
            </div>
          </div>
        </el-form-item>
      </el-row>
    </el-form>
    <span v-if="title!=='详情'" slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="checkBtn">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {patrol, userApi} from '../../api/inspection/apiUntil'
import {getPatrolQueryInfo, getPatrolUpt} from "../../api/inspection/pator";

export default {
  props: ['DialogPatrolShow', 'title', 'row'],
  data() {
    return {
      show: false,
      optionsListItem: [],
      optionsList: [
        {
          name: '例行巡视',
          value: '例行巡视'
        },
        {
          name: '特殊巡视',
          value: '特殊巡视'
        },
        {
          name: '专项巡视',
          value: '专项巡视'
        },
        {
          name: '自定义巡视',
          value: '自定义巡视'
        }
      ],
      itemType: '',
      selectItemType: [],
      formInline: {
        patrolPlanName: '',
        patrolPlanDesc: '',
        patrolPlanType: '',
        patrolCycles: '',
        patrolFrequency: '',
        assignIds: [],
      },
    };
  },
  mounted() {
    //显示弹窗
    this.show = this.DialogPatrolShow
    this.formInline.assignId = this.row.id
    if (this.title != '新增') {
      this.formInline = Object.assign(this.formInline, this.row)
      console.log(this.formInline)
      this.getInit()
    }
    this.getWorkList()
  },
  methods: {
    getInit(){
      let params = {
        id:this.formInline.id
      }
      patrol.getPatrolQueryInfo(params).then((res) => {
        if (res) {
          //旧作业项id
          this.formInline.oldAssignIds=res.data.subVOList.map(e => e.assignId)
          this.selectItemType = this._getDataChangeEcho(res.data.subVOList)

          this.$refs.tree.setCheckedKeys(res.data.subVOList.map(e => e.assignId))
        }
      })
    },
    getDelete(item) {
      this.selectItemType.forEach((el, index) => {
        if (el.value == item.value) {
          return this.selectItemType.splice(index, 1)
        }
      })
      this.$refs.tree.setCheckedKeys(this.selectItemType.map(e => e.value))
    },
    //作业项列表
    getWorkList() {
      let params = {
        pageNum: 1,
        pageSize: 1000,
        assignName: ''
      }
      userApi.getAssignQuery(params).then((res) => {
        if (res) {
          this.optionsListItem = this.getDataChange(res.data)
        }
      })
    },
    _getDataChangeEcho(data) {
      return data.map((item) => {
        return {
          value: item.assignId,
          label: item.assignSubName,
        };
      })
    },
    _getDataChange(data) {
      return data.map((item) => {
        return {
          value: item.id,
          label: item.assignSubName,
        };
      })
    },
    getDataChange(data) {
      return data.map((item) => {
        const transformedItem = {
          value: item.id,
          label: item.assignName,
          children: item.subVOList
        };
        if (item.subVOList && item.subVOList.length > 0) {
          transformedItem.children = this._getDataChange(item.subVOList);
        }
        return transformedItem;
      })
    },
    //选择作业项
    getItemSelect() {
      let _checkedNodes = this.$refs.tree.getCheckedNodes()
      let arr = []
      Object.keys(_checkedNodes).map((item)=>{
        if(_checkedNodes[item]&&!_checkedNodes[item].children){
          arr.push(_checkedNodes[item])
        }
      })
      this.selectItemType = arr;
    },
    //关闭弹窗
    handleClose() {
      this.show = false
      this.$emit('closeDialog')
    },
    getResult(res) {
      if (res.code === 200) {
        this.$message({
          message: this.title + '成功',
          type: 'success'
        });
        this.handleClose()
      }
    },
    checkBtn() {
      let _arr = []
      this.selectItemType.forEach((item) => {
        _arr.push(item.value)
      })
      this.formInline.assignIds = _arr
      let {assignId, ...param} = this.formInline
      if (this.title === '新增') {
        patrol.getPlanAdd(param).then((res) => {
          this.getResult(res)
        })
      } else {
        patrol.getPatrolUpt(param).then((res) => {
          this.getResult(res)
        })
      }
    }
  }
};
</script>

<style lang="scss" scoped>
> > > .el-dialog__header {
  padding: 20px !important;
  background: #1B7B87;
}

> > > .el-dialog__title {
  color: #fff !important;
  font-size: 16px;
}

.selectWork {
  width: 510px;
  border: 1px solid #ccc;
  min-height: 60px;
  border-radius: 3px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
}

.tab {
  padding: 10px 20px 10px 10px;
  background: #0c9ab1;
  color: #fff;
  display: inline-block;
  height: 25px;
  line-height: 3px;
  text-align: center;
  border-radius: 3px;
  margin: 10px;
  position: relative;

  .closeIcon {
    display: inline-block;
    height: 15px;
    position: absolute;
    right: 0;
    top: 0;
    cursor: pointer;
  }
}
</style>
